import { Fragment } from 'react';
import { Row, Col } from 'antd';
import Props from "../base/Props";
import classNames from 'classnames';
import defaultData, { icons } from "./data";
import { WeaSelect, WeaInputNumber, WeaLocaleProvider } from "ecCom";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const CUSTOM = "-1";
const MAXNUM = 10;
const MINNUM = 3;
const OPTIONS = [{
  key: "3",
  selected: true,
  showname: '3'
}, {
  key: "5",
  showname: '5',
  selected: false
}, {
  key: "10",
  showname: '10',
  selected: false
}, {
  key: CUSTOM,
  showname: getLabel(502465, '自定义'),
  selected: false
}];

export default class RatingProps extends Props {
  getIcon(e) {
    const target = e.target;
    const attr = node => node.getAttribute('data-icon');

    return attr(target) || attr(target.parentNode);
  }

  _score = scoreType => {
    return CUSTOM === scoreType ? MINNUM : parseInt(scoreType);
  }

  renderContent() {
    const { icon, score = 5, scoreType = '5' } = this.props.data;
    const isCustom = CUSTOM === scoreType;

    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@2mlxfg`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1truxx`} className='edc-sepline'>
          <label>{getLabel('504026', '满分')}</label>
          <div>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jz1hc0`} span={isCustom ? 8 : 24}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@gbn8si`}
                options={OPTIONS}
                value={scoreType}
                style={{ width: '100%' }}
                onChange={this.handlePropChange("scoreType:(refs={'score': _score})")}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0erds1`} offset={2} span={14} className={classNames({ hide: !isCustom })}>
              <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@kdugvr`}
                value={score}
                max={MAXNUM}
                min={MINNUM}
                onChange={this.handlePropChange(`score:(number={max:${MAXNUM}})`)}
              />
            </Col>
          </div>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@q26b00`} className='edc-row-hor'>
          <label>{getLabel('502516', '图标')}</label>
          <div className='rating-img-container'>
            {icons.map(iconType => (
              <span className={classNames({ selected: icon === iconType })}
                data-icon={iconType}
                onClick={this.handlePropChange('icon', this.getIcon)}
              >
                <i className={`rating-icon rating-icon-${iconType} highlight`} />
              </span>
            ))}
          </div>
        </Row>
      </Fragment>
    );
  }
}

RatingProps.defaultProps = {
  data: defaultData,
  onChange: () => { }
};